// * Echarts 按需引入
import * as echarts from 'echarts/core'
import { CanvasRenderer,SVGRenderer } from 'echarts/renderers'
import { LabelLayout, UniversalTransition } from 'echarts/features'

import {
  BarChart, //柱状图
	PieChart, //饼图
	GraphChart, //关系图
	LineChart, //折现
	MapChart, //地图
  ScatterChart, //散点图
  PictorialBarChart ,//
  CustomChart,
  GaugeChart,
  LinesChart,
} from 'echarts/charts'
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  GeoComponent,
  TimelineComponent,
  LegendComponent,
  VisualMapComponent,
  VisualMapContinuousComponent,
  DataZoomComponent,
  PolarComponent
} from 'echarts/components'

// 注册必须的组件
echarts.use([
  LinesChart,
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  SVGRenderer,
  DataZoomComponent,
  BarChart,
  LineChart,
  PieChart,
  //地图
  GeoComponent,
  VisualMapComponent,
  TimelineComponent,
  VisualMapContinuousComponent,
  MapChart,
	GraphChart,
  ScatterChart,
  PictorialBarChart,
  CustomChart,
  PolarComponent,
  GaugeChart
])



import type { EChartsOption } from "echarts";
import {Ref} from 'vue'
type Theme = 'light' | 'dark' | 'default'
export function useEcharts(ref: Ref<HTMLHtmlElement>, theme: Theme = 'default',options:any = { renderer: 'svg' }) {
  const echartsInstance = echarts.init(ref.value, theme,options)

  function setOption(options: EChartsOption) {
    echartsInstance.setOption(options)
  }
  addEventListener('resize',() => {
    echartsInstance.resize({
      animation: {
        duration: 100,
        easing: 'quadraticIn',
      },
    })
  })
  return {
    setOption,
    echartsInstance,
    echarts,
  }
}
